<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加培训信息</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <link rel="stylesheet" href="../../js/lay-module/step-lay/step.css" media="all">
  <style>
    .layui-carousel>[carousel-item]{
      position:relative;
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-card-body" style="padding-top: 40px;">
          <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
            <div carousel-item>
              <div>
                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">

                  <div class="layui-form-item">
                    <label class="layui-form-label required">工号</label>
                    <div class="layui-input-block">
                      <input type="text" placeholder="请输入工号" value="" class="layui-input" lay-verify="required" >
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <l监视abel class="layui-form-label">讲师姓名</l监视abel>
                    <div class="layui-input-block">
                      <input type="text" placeholder="请填写讲师姓名" value="" class="layui-input" lay-verify="required" >
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                      <input type="number" placeholder="请输入手机号码" value="" class="layui-input" lay-verify="required" >
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">课程名称</label>
                    <div class="layui-input-block">
                      <input type="number" placeholder="请输入课程名称" value="" class="layui-input" lay-verify="required" >
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">课时</label>
                    <div class="layui-input-block">
                      <input type="text" placeholder="请输入课时" value="" class="layui-input" lay-verify="required" >
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <label class="layui-form-label">课时费</label>
                    <div class="layui-input-block">
                      <input type="number" placeholder="请输入课时费" value="" class="layui-input" lay-verify="required" >
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">是否已发放</label>
                    <div class="layui-input-block">
                      <input type="checkbox" name="close" lay-skin="switch" lay-text="已发放" checked="">
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit lay-filter="formStep">
                        &emsp;下一步&emsp;
                      </button>
                    </div>
                  </div>

                </form>
              </div>

              <div>
                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                  <div class="layui-form-item">
                    <label class="layui-form-label">课程名称:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">生产工艺技能</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">讲师:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">王五</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">课时:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">3</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">检测时间:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">
                        <span style="font-size: 18px;color: #333;">2021-12-12</span>
                      </div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">培训地点:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">综合楼二层303</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">学员人数:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">50</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">岗位类别:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">技工类</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">培训形式:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">内训</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">培训类型:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">车间班组级</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">审批状态:</label>
                    <div class="layui-input-block">
                      <div class="layui-form-mid layui-word-aux">不审批</div>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                      <button class="layui-btn" lay-submit lay-filter="formStep2">
                        &emsp;提交培训需求&emsp;
                      </button>
                    </div>
                  </div>
                </form>
              </div>
              <div>
                <div style="text-align: center;margin-top: 90px;">
                  <i class="layui-icon layui-circle"
                     style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                  <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                    提交成功
                  </div>
                  <div style="font-size: 14px;color: #666;margin-top: 20px;">预计一天审批完成</div>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
            <h3>说明</h3><br>
            <h4> 提交培训需求</h4>
            <p>填写上面表单完整信息后点击下一步确认提交需求</p>
            <br><h4>审批培训需求</h4>
            <p>具有审批资格的管理员在修改页面点击审批按钮进行审批后确认提交</p>
          </div>

        </div>
      </div>
    </div>

  </div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
  layui.use([ 'form', 'step'], function () {
    var $ = layui.$,
            form = layui.form,
            step = layui.step;


    step.render({
      elem: '#stepForm',
      filter: 'stepForm',
      width: '100%', //设置容器宽度
      stepWidth: '750px',
      height: '500px',
      stepItems: [{
        title: '填写培训费用信息'
      }, {
        title: '确认培训费用信息'
      }, {
        title: '完成'
      }]
    });


    form.on('submit(formStep)', function (data) {
      step.next('#stepForm');
      return false;
    });

    form.on('submit(formStep2)', function (data) {
      step.next('#stepForm');
      return false;
    });

    $('.pre').click(function () {
      step.pre('#stepForm');
    });

    $('.next').click(function () {
      step.next('#stepForm');
    });
  })
</script>
</body>
</html>